<template>
  <div>
      <h2>首页</h2>
      <p>首页内容</p>
      <!-- 嵌套路由,to后面跟随的是完整的路径 -->
      <router-link to="/home/news">新闻</router-link>
      <router-link to="/home/message">消息</router-link>

      <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return {
      path: '/home/news' //使用path记录路径,使组件切换后,当时选中的状态还能保存
    }
  },
  // 当组件被创建时触发
  created(){
      // console.log("created")
  },
  // 当组件被销毁时触发
  destroyed(){
      // console.log("destroyed")
  },
  // activated和deactivated只有该组件使用了keep-alive保持了状态时,才会第一次,否则不会调用
  // 当组件被激活时触发
  activated(){
      // console.log("activated")
    this.$router.push(this.path)
  },
  // 当组件离开激活状态时触发
  deactivated(){
      console.log("deactivated")
  },
  // 组件内导航守卫
  beforeRouteLeave(to,from,next){
    this.path = this.$route.path
    next()
  }
}
</script>

<style>

</style>